Day29 六角 模仿遊戲#2

簡單小語

一開始看到這個版就覺得很酷可以記錄信用卡資訊，稍微玩了一下動畫起初覺得有難的感覺，但實際寫下去才發現兩行就可以完成了，看來我的功力真的太淺，無法用思考得知程式難易度，這次練習用了好久不見的animation製作動畫效果，也複習了linear-gradient的用法，讓畫面可有漸層感，重要的是學到了文字漸層的用法，雖然也是複製貼上，不過也算學了一個新樣式，套用下去就能讓信用卡數字慢慢漸變，帶有立體的金屬感，彷彿真正的信用卡(咦!?自我感覺良好)，30天即將抵達尾聲，不是終點而是一個歷程的斷點，不要被30天侷限住了，持續挑戰。

筆記分享

1. 文字漸變起手式，套用下去就對了。

background-color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2. 注意每一階層的寬度及padding，讓物件有層層的感覺，wrap, content, card, item-group。
3. 使用transform:rotate()旋轉font-awesome讓樣式看起來跟信用卡NFC相同。
4. 信用卡數字套用animation及文件漸變方式，讓樣式看起來慢慢的有立體感，當然，是我自己認為。
5. 利用偽元素製作MasterCard，讓兩個圓交疊並讓其中一個呈現透明感。
6. 晶片讀取點也是利用偽元素方式，線條部分則是複習box-shadow複製再複製，記好位置，就能行雲流水的運用囉。
7. container內容結構寫好flex開下去，沒什麼大問題，在小尺寸捨棄了品項，因為太寬啦。
8. JQuery掌握重點，記住自己點擊後要產生的效果，釐清一下迎刃而解。
9. item-group的底層灰色背景使用偽元素製作，注意z-index的權重即可避免內容被覆蓋。
10. linear-graditent的%數記得定義，腦袋想像漸變效果，實作後判斷自己的觀念是否有誤。

刻意練習

Practice(200825 Day 29)

樣板來源

Wallet App Animation

2020 iT邦幫忙鐵人賽 Day29 網頁前端-刻意練習(模仿遊戲#2)